.account-menu { position: relative; flex: 0 0 auto; color: var(--text); }
.account-trigger { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 4px 7px; border: 1px solid transparent; border-radius: 9px; list-style: none; cursor: pointer; color: var(--text); background: transparent; transition: background .16s, border-color .16s; }
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger:hover, .account-menu[open] .account-trigger { border-color: var(--line-hi); background: var(--tinted-surface, var(--panel-hi)); }
.account-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.account-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #3285bb; border-radius: 50%; background: linear-gradient(145deg, #076fac, #042943); color: #f1f8ff; font: 500 16px/1 var(--font); box-shadow: inset 0 1px 4px #61cfff26; }
.account-presence { position: absolute; inset-inline-end: -1px; bottom: 0; width: 8px; height: 8px; border: 2px solid var(--panel); border-radius: 50%; background: #00dfb2; }
.account-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 68px; text-align: start; }
.account-copy strong { color: var(--text); font: 500 12px/1.2 var(--font); }
.account-copy small { font: 400 10px/1.2 var(--font); color: var(--muted); }
.account-chevron { font-size: 9px; color: var(--muted); transition: transform .16s; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 11px); inset-inline-end: 0; z-index: 120; width: min(274px, calc(100vw - 24px)); max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid var(--line-hi); border-radius: 11px; background: var(--panel); color: var(--text); box-shadow: 0 16px 40px #0005, 0 0 15px #087bc515; text-align: start; }
.account-menu:not([open]) .account-dropdown { display: none; }
.account-identity { display: flex; align-items: center; gap: 11px; padding: 13px 10px 16px; margin-bottom: 5px; border-bottom: 1px solid var(--line); }
.account-identity .account-avatar { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; }
.account-identity > div { display: flex; flex-direction: column; gap: 5px; }
.account-identity strong { font: 500 15px/1.3 var(--font); color: var(--text); }
.account-identity small { font: 400 12px/1.3 var(--font); color: var(--muted); }
.account-dropdown nav { display: flex; flex-direction: column; gap: 3px; }
.account-dropdown nav > a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 12px; border: 1px solid transparent; border-radius: 6px; color: var(--text); font: 400 14px/1.4 var(--font); text-decoration: none; }
.account-dropdown nav > a > .fa-solid { width: 18px; text-align: center; font-size: 15px; color: var(--cyan); filter: none; }
.account-dropdown nav > a:hover, .account-dropdown nav > a:focus-visible { background: var(--tinted-surface, var(--panel-hi)); border-color: var(--line); outline: none; }
.account-dropdown nav > .account-logout { margin-top: 5px; border-top-color: var(--line); color: var(--red); }
.account-dropdown nav > .account-logout > .fa-solid { color: var(--red); }
.account-dropdown nav > .account-logout:hover, .account-dropdown nav > .account-logout:focus-visible { background: var(--badge-red-bg); border-color: var(--red); }
.account-demo-note { padding: 10px 9px 3px; margin: 3px 0 0; color: var(--muted); font: 400 10px/1.5 var(--font); }
html[data-theme="light"] .account-dropdown { box-shadow: 0 12px 32px #264a6b26; }
@media (max-width: 1199px) { .account-copy, .account-chevron { display: none; }.account-trigger { padding: 4px; } }
@media (max-width: 600px) {
  .workspace .topbar .brand { min-width: 0; gap: 7px; }
  .workspace .topbar .brand > span { font-size: 14px; letter-spacing: 1.3px; }
  .workspace .topbar .brand small { font-size: 5px; letter-spacing: 1px; }
  .account-dropdown { top: calc(100% + 8px); }
}
@media (max-width: 420px) { .workspace .topbar .brand > span { display: none; }.workspace .topbar .brand > img { width: 26px; height: 37px; } }
@media (prefers-reduced-motion: reduce) { .account-trigger, .account-chevron { transition: none; } }